正文開始:
一個網站若是少了圖片感覺就不像是完整的,在這裡先介紹如何在網頁使用圖片,後面講到CSS的時候將會有更多關於圖片的教學。
<body>
<img src="URL" alt="看不到圖片就會顯示我" title="滑鼠移到此圖時就會顯示我" />
</body>
img內基本上會提供src和alt這兩個屬性,src告訴瀏覽器圖片在哪裡,而alt則是在圖片無法顯示時的一個替代方案,那怕圖片本身沒意義也是建議使用alt屬性,裡面空白不寫即可。
src和之前在超連結a標籤時提到的href屬性很像,不過兩者具有本質上的差別,src屬性會代表著該標籤,大概意思是如果src引用的是什麼那這標籤代表的就是什麼;而href標籤則是提供一個往外溝通的管道,而在瀏覽器的解讀方面來說遇到href屬性時html解析不會暫停,而遇到src屬性時html解析會停止到這個標籤解讀完。
再來要介紹一個大家很常用的標籤iframe,這標籤是用來鑲入別人網站用的,常見的地方有google Map、youtube影片,不過現在由於版權問題許多網站都禁止他人隨意使用iframe來使用他人網站,因此若要使用此標籤還請格外注意。
<body>
<iframe src="URL" width="" height=""></iframe>
</body>
使用時在width和height屬性填入需要的寬度和長度即可
我們可以使用audio標籤來在網站鑲入一個播放器,每個瀏覽器對於音訊格式的支援不盡相同,使用前建議先行查詢。
<body>
<audio controls preload="" loop>
<source src="URL1" />
<source src="URL2" />
</audio>
</body>
controls屬性是用來顯示控制按鈕,如非需要顯示按鈕不輸入即可
loop屬性指定音訊撥放結束後自動在撥放一次
preload屬性提供了三個參數,分別為
none:在撥放前不載入任何資料
auto:瀏覽器在頁面載入同時也下載檔案
metadata:只下載基本資料
source標籤是用來給予多種來源格式用的,使用上再加上src屬性即可。
影片放置上也跟音訊類似,只是標籤換成是video而已
<body>
<video poster="URL" preload="" controls loop>
<source src="URL1" type="video/mp4" />
<source src="URL2" type="video/webn" />
</video>
</body>
video多了poster和type屬性,poster會添加一張圖片作為影片撥放前所顯示的圖片,而type屬性則是先告知瀏覽器所用的影片格式為何,以免下載完後才發現不相容。
現在我們學會了許多HTML的基礎,若我們想要在編寫時添加註解的話就載需要的地方"!--內容--!"即可,而我們要宣告所使用HTML版本則是使用doctype標籤
<!doctype html><!--這代表的是html第五版--!>
<html>
<head>
</head>
<body>
</body>
</html>
今天的內容到此結束,明天將介紹網頁互動的基本--表單。